<template>
  <NUpload :file-list="fileList || []" :list-type v-bind="attrs" @update:file-list="value => fileList = value">
    <slot>
      <template v-if="props.listType === 'image-card'">
        <template v-if="props.content">
          {{ props.content }}
        </template>
      </template>
      <NvButton
        v-else
        :default-render-icon="() => h(CloudArrowUp24Regular)"
        :content="content ?? '上传'"
        v-bind="pick(attrs, Object.keys(buttonProps))"
      />
    </slot>
    <template v-for="(_, name) in slots" #[name]="slotData">
      <slot :name="name" v-bind="slotData || {}" />
    </template>
  </NUpload>
</template>

<script setup lang="ts">
import type { UploadFileInfo, UploadProps } from 'naive-ui'
import { CloudArrowUp24Regular } from '@vicons/fluent'
import { pick } from 'lodash-es'
import { buttonProps, NUpload } from 'naive-ui'
import { h, useAttrs } from 'vue'
import { NvButton } from '@/components'

defineOptions({
  inheritAttrs: false,
})

const props = defineProps<{ listType?: UploadProps['listType'], content?: string }>()
const { default: _default, ...slots } = defineSlots()
const fileList = defineModel<UploadFileInfo[]>('fileList', { default: () => [] })
const attrs = useAttrs()
</script>
